/**
 * Created by Administrator on 2017/7/13.
 */



/**********************************************************************************/

//    从html中获取添加按钮并设置添加变量add
var add=document.getElementById("add");
//    从html中获取id为bgdiv的元素并且设置添加变量
var bgdiv=document.getElementById("bgdiv");
//    从html中获取取消按钮并设置添加变量add
var offBtnInp=document.getElementById("offBtnInp");
//    从html中获取刷新按钮并且设置添加变量refresh
var refresh=document.getElementById("refresh");
//   从html中获取id为tby的标签并且设置添加变量为tby（表格tbody）
var tby=document.getElementById("tby");
//   从html中获取id为addBtnInp的按钮并且添加变量为addBtnInp；
var addBtnInp=document.getElementById("addBtnInp");
//   获取html中的id为tab的标签并且添加变量tab
var tab=document.getElementById("tab");
//   获取html中id为addLeft标签并且设置添加变量addLeft
var addLeft=document.getElementById("addLeft");
//   获取html中id为addRight标签并且设置添加变量addRight
var addRight=document.getElementById("addRight");
//   获取addRight下面的所有input标签
var addRightInp=addRight.getElementsByTagName("input");
//   获取addLeft下面所有的input标签
var addLeftInp=addLeft.getElementsByTagName("input");
//   获取html中id为alterBtnInp的修改按钮标签并且设置添加变量alterBtnInp
var alterBtnInp=document.getElementById("alterBtnInp");
//   设置一个变量为bookid
var bookid;
/****************************************************************************************/

//    给添加按钮添加点击事件函数名为addclickHandler
add.addEventListener("click",addclickHandler);

//    给取消按钮添加点击事件函数名为offBtnInpclickHandler
offBtnInp.addEventListener("click",offBtnInpclickHandler);

//    给刷新按钮添加点击事件函数名为refreshclickHandler
refresh.addEventListener("click",refreshclickHandler);

//    给添加书籍中的添加按钮添加点击函数addBtnInpclickHandler
addBtnInp.addEventListener("click",addBtnInpclickHandler);

//    为修改书籍中修改按钮添加点击事件
alterBtnInp.addEventListener("click",alterBtnInpHandler);

/*********************************************************************************/

//  打开页面先执行ajaxHandler函数把服务器的数据添加到表格中
        ajaxHandler();

//   添加点击函数addclickHandler
        function addclickHandler(e) {
    if(!e){
        e=window.event
    }
//        当点击添加按钮的时候让bgdiv的display属性为block（显示）
    bgdiv.style.display="block";
    alterBtnInp.style.display="none";
    addBtnInp.style.display="block";
    clearInput();
};

//   取消点击函数offBtnInpclickHandler
        function offBtnInpclickHandler(e) {
    if(!e){
        e=window.event
    }
//        点击取消按钮时让bgdiv的display属性为none（不显示）
    bgdiv.style.display="none";
};

//   刷新点击函数refreshclickHandler
        function refreshclickHandler(e) {
    if(!e){
        e=window.event
    }
//       当点击刷新的时候先执行removeChildren函数并且传入参数tby，把tby下面所有的节点删除然后重新创建节点
    removeChildren(tby)
    ajaxHandler();
};

//    添加书籍中添加按钮的点击函数addBtnInpclickHandler
        function addBtnInpclickHandler(e) {
            if(!e){
                e=window.event
            }
        //      使用ajax添加数据
            var xhr=new XMLHttpRequest();
            xhr.open("post","http://localhost:6500/mybook");
            xhr.setRequestHeader("Content-Type","application/json");
            var obj={
                bookname:booknameInp.value,
                author:authorInp.value,
                price:priceInp.value,
                vipPrice:vipPriceInp.value,
                stuPrice:stuPriceInp.value,
                number:numberInp.value,
                page:pageInp.value,
                norms:normsInp.value,
                address:addressInp.value,
                bookImg:bookImgInp.value,
                data:dataInp.value,
                addnum:addnumInp.value
            }
            xhr.send(JSON.stringify(obj));
            xhr.onreadystatechange=function () {
                if(xhr.readyState==4){
                    if(xhr.status>=200){
                        bgdiv.style.display="none";
        //              删除tby下面的所有子节点；
                        removeChildren(tby);
        //              当点击的时候发送ajax请求数据
                        ajaxHandler();
                    }
                }
            }

};

//    创建ajax请求数据函数ajaxHandler
        function ajaxHandler() {
    //      用ajax向服务器发送请求把数据调回来
    var xhr=new XMLHttpRequest()
    xhr.open("get","http://localhost:6500/mybook",true);
    xhr.send();
    xhr.onreadystatechange=function () {
        if(xhr.readyState==4){
            if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
//                  把请求成功回来的数据转换成字面量对象并且带入createHtml函数中
                var str=JSON.parse(xhr.responseText);
                createHtml(str)
            }
        }
    }
};

//   创建删除函数防止点击刷新按钮 添加多个文件
        function removeChildren(pnode){
            var childs=pnode.childNodes;
            for(var i=childs.length-1;i>=0;i--){
            pnode.removeChild(childs.item(i));
    }
};

//   创建createHtml函数把获取到的数据进行dom操作动态添加到列表
        function createHtml(a) {
            console.log(a.length)
            for(var i=0;i<a.length;i++){
        //            创建tr并且把tr添加到tdy中
                var trs=document.createElement("tr")
                tby.appendChild(trs);
        //            创建td1并且把td1添加到trs
                var td1=document.createElement("td");
        //            创建img把数据中bookImg属性值展示在img里，并且把img添加到td1中
                var bookimg=document.createElement("img");
                bookimg.src=a[i]["bookImg"];
                td1.appendChild(bookimg);
                trs.appendChild(td1);
        //            创建td2把数据中的bookname属性的属性值展示在td2中，把td2添加到trs中
                var td2=document.createElement("td");
                td2.innerHTML=a[i]["bookname"]
                trs.appendChild(td2);
        //            创建td3把数据中的author属性的属性值展示在td3中，把td3添加到trs中
                var td3=document.createElement("td");
                td3.innerHTML=a[i]["author"]
                trs.appendChild(td3)
        //            创建td4把数据中的price属性的属性值展示在td4中，把td4添加到trs中
                var td4=document.createElement("td");
                td4.innerHTML=a[i]["price"];
                trs.appendChild(td4)
        //            创建td5把数据中的address属性的属性值展示在td5中，把td5添加到trs中
                var td5=document.createElement("td");
                td5.innerHTML=a[i]["address"];
                trs.appendChild(td5)
        //            创建td6把数据中的data属性的属性值展示在td6中，把td6添加到trs中
                var td6=document.createElement("td");
                td6.innerHTML=a[i]["data"];
                trs.appendChild(td6);
        //            创建td7把数据中的addnum属性的属性值展示在td7中，把td7添加到trs中
                var td7=document.createElement("td");
                td7.innerHTML=a[i]["addnum"];
                trs.appendChild(td7);
        //            创建td8并且添加到trs中；
                var td8=document.createElement("td");
                trs.appendChild(td8);
        //            创建修改按钮 并且添加到td8中
                var modbtn=document.createElement("button");
                modbtn.setAttribute("data-id",a[i]["id"]);
                modbtn.onclick=alterHandler;
                modbtn.innerHTML="修改";
                td8.appendChild(modbtn);
        //            创建删除按钮并且添加到td8中
                var delbtn=document.createElement("button");
                delbtn.innerHTML="删除";
        //            给删除按钮添加点击函数；
                delbtn.setAttribute("data-id",a[i]["id"]);
                delbtn.onclick=delclickHandler;
                td8.appendChild(delbtn);

            }
};

//   设置删除按钮的点击函数delclickHandler
        function delclickHandler(e) {
    if(!e){
        e=window.event
    }
    var url="http://localhost:6500/mybook";
    var xhr=new XMLHttpRequest();
    xhr.open("delete",url+"/"+this.getAttribute("data-id"));
    var t=this;
    xhr.send({});
    xhr.onreadystatechange=function () {
        if(xhr.readyState=4){
            if(xhr.status>=200){
                t.parentNode.parentNode.remove()
            }
        }
    }
};

//   创建将表格内容清空的函数
        function clearInput() {
    for(var i=0;i<addLeftInp.length;i++){
        addLeftInp[i].value=null;
    };
    for (var j=0;j<addRightInp.length;j++){
        addRightInp[j].value=null;
    }
};

//   创建修改按钮的点击函数
        function alterHandler(e) {
    var xhr=new XMLHttpRequest();
    var url="http://localhost:6500/mybook";
    xhr.open("get",url+"/"+this.getAttribute("data-id"));
    xhr.send(null);
    xhr.onreadystatechange=function () {
        if (xhr.readyState==4){
            if(xhr.status>=200){
                console.log(xhr.responseText )
                alter(JSON.parse(xhr.responseText))
            }
        }
    }
}

//    把数据添加到表格中并且把数据在整理成Json数据返回
        function alter(c) {
    bgdiv.style.display="block";
    addBtnInp.style.display="none";
    alterBtnInp.style.display="inline-block";
    booknameInp.value=c.bookname;
    authorInp.value=c.author;
    priceInp.value=c.price;
    vipPriceInp.value=c.vipPrice;
    stuPriceInp.value=c.stuPrice;
    numberInp.value=c.number;
    pageInp.value=c.page;
    normsInp.value=c.norms;
    addressInp.value=c.address;
    bookImgInp.value=c.bookImg;
    dataInp.value=c.data;
    addnumInp.value=c.addnum;
    bookid=c.id;
}

//     点击修改书籍按钮中的修改按扭并且发送请求改变值
        function alterBtnInpHandler(e) {
    if(!e){
        e=window.event
    }
    bgdiv.style.display="none";
    var objs={
        bookname:booknameInp.value,
        author:authorInp.value,
        price:priceInp.value,
        vipPrice:vipPriceInp.value,
        stuPrice:stuPriceInp.value,
        number:numberInp.value,
        page:pageInp.value,
        norms:normsInp.value,
        address:addressInp.value,
        bookImg:bookImgInp.value,
        data:dataInp.value,
        addnum:addnumInp.value

    };
    $.ajax({
        url:"http://localhost:6500/mybook"+"/"+bookid,
        type:"put",
        data:objs,
        success:function () {
            console.log(11);
            removeChildren(tby);
            ajaxHandler();
        }
    });

}

console.log(localStorage.dataId);
